<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <title>v-for遍历对象</title>
    <script src="js/vuejs-2.5.16.js"></script>
</head>

<body>
<div id="app">
    <table border="1">
        <tr>
            <td>序号</td>
            <td>编号</td>
            <td>名称</td>
            <td>价格</td>
        </tr>
        <tr v-for="(product,index) in products ">
            <td>{{index}}</td>
            <td>{{product.id}}</td>
            <td>{{product.name}}</td>
            <td>{{product.price}}</td>
        </tr>
    </table>
</div>
</body>
<script>
    //view model
    new Vue({
        el: "#app",
        data: {
            products: [
                {id: 1, name: "笔记本电脑", price: 5000},
                {id: 2, name: "手机", price: 3000},
                {id: 3, name: "电视", price: 4000}
            ]
        }
    })
</script>

</html>